<template>
  <a-modal :open="open" width="1100px" :footer="false" title="执行明细" centered @cancel="onCancel">
    <a-form :model="formState" layout="inline" class="m-8">
      <div class="border-b-2">
        <a-descriptions class="mt-3" :column="4">
          <a-descriptions-item label="日期范围"> {{ timeShow }}</a-descriptions-item>
          <a-descriptions-item label="挂号人次" class="pl-16">{{ rowData?.quantity }}</a-descriptions-item>
          <a-descriptions-item label="标准金额"> {{ '￥' + rowData?.bzje || '0.00' }}</a-descriptions-item>
          <a-descriptions-item label="实际金额">{{ '￥' + rowData?.sjje || '0.00' }}</a-descriptions-item>
        </a-descriptions>
      </div>

      <BaseTable class="mt-4 h-[400px] detail-table" column-code="000044" :data-source="tableData" :loading="loading" :scroll="{ x: 1200, y: 320 }">
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'xh'">{{ index + 1 }}</template>
        </template>
      </BaseTable>
    </a-form>
  </a-modal>
</template>
<script setup>
import { watch, ref } from 'vue'
import useUserStore from '@/store/user'
import BaseTable from '@/components/BaseTable'

const { empId } = useUserStore()
const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  time: {
    type: String,
    default: () => ''
  }
})
const timeShow = ref('')
const { loading, tableData, getData } = useTable({
  url: '/outp/mzys/getPhysicianWorkloadInquiryDetailsList',
  params: props.rowData,
  formatParams: () => {
    return {
      ysbh: empId,
      xmlb: props.rowData.xmlb,
      stdate: props.time[0],
      eddate: props.time[1]
    }
  }
})
const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      timeShow.value = props.time[0] + '至' + props.time[1]
      getData()
    }
  }
)
</script>

<style lang="less" scoped>
.button-active {
  line-height: 30px;
  border: 1px solid var(--primary-color);
}
.active {
  color: #fff;
  background-color: var(--primary-color);
}
</style>
